<template>
  <div v-loading="loading">
    <div class="gl_contentBox" style="padding: 0">
      <div class="title">审核详情单</div>
      <div class="content">
        <el-row :gutter="10">
          <el-col :span="12">
            <span class="name">培训名称：</span>
            <span>{{ info.name }}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">详细地址：</span>
            <span>{{ addressDataForCheck(info) }} {{ info.address }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="gl_my_20 gl_py_5">
          <el-col :span="12">
            <span class="name">培训类型：</span>
            <span>{{ info.trainningType && info.trainningType.name }}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">二级域名：</span>
            <span>{{ prefixRoute }}{{ info.route }}</span>
            <span v-if="info.tenantId || user.tenantId">_{{ info.tenantId || user.tenantId }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <span class="name">联系人：</span>
            <span>{{ info.contactPerson }}</span>
          </el-col>
          <el-col :span="12">
            <span class="name">联系电话：</span>
            <span>{{ info.contactPhoneNumber }}</span>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="12">
            <p>
              <span class="name">报名时间：</span>
              <span>{{ info.entryStartTime && info.entryStartTime.substring(0, 10) }}</span> ~
              <span>{{ info.entryEndTime && info.entryEndTime.substring(0, 10) }}</span>
            </p>
            <p>
              <span class="name">报道注册时间：</span>
              <span>{{ info.checkInStartTime && info.checkInStartTime.substring(0, 10) }}</span> ~
              <span>{{ info.checkInEndTime && info.checkInEndTime.substring(0, 10) }}</span>
            </p>
            <p>
              <span class="name">培训时间：</span>
              <span>{{ info.startTime && info.startTime.substring(0, 10) }}</span> ~
              <span>{{ info.endTime && info.endTime.substring(0, 10) }}</span>
            </p>
          </el-col>
          <el-col :span="12">
            <div class="img_box">
              <div class="show_img"><img :src="getStaticFileUrl(info.logoUrl)" alt=""></div>
              <div class="name">LOGO</div>
            </div>
            <div class="img_box">
              <div class="show_img"><img :src="getStaticFileUrl(info.coverUrl)" alt=""></div>
              <div class="name">封面图</div>
            </div>
            <div class="img_box">
              <div class="show_img"><img :src="getStaticFileUrl(info.backgroundUrl)" alt=""></div>
              <div class="name">背景图</div>
            </div>
          </el-col>
        </el-row>
        <div style="margin-top: 70px">
          <span class="name">报名须知：</span>
          <div style="width: calc(100% - 70px);" class="gl_dis_ib gl_top">
            <div v-if="info.entryNoticeUrl" class="gl_mb_10"><a class="entry" :href="getStaticFileUrl(info.entryNoticeUrl)">《报名须知》</a></div>
            <div v-if="info.entryNotice" class="text" v-html="info.entryNotice" />
          </div>
        </div>
        <el-row class="gl_mt_20">
          <el-col :span="24" align="center">
            <el-button class="train_button" @click="goBack()">返回</el-button>
            <template v-if="info.approveStatusCode && info.approveStatusCode === 'ApproveSuccess'">
              <el-button :disabled="true" type="success" plain icon="el-icon-circle-check" class="train_button">审核通过</el-button>
            </template>
            <template v-else-if="info.approveStatusCode && info.approveStatusCode === 'ApproveFailed'">
              <el-button :disabled="true" type="danger" plain icon="el-icon-circle-close" class="train_button">审核未通过</el-button>
            </template>
            <template v-else>
              <el-button type="primary" class="train_button" @click="openApprove(approveId, 'detail')">审核</el-button>
            </template>
          </el-col>
        </el-row>
      </div>
      <Approve ref="approve" />
    </div>
    <div v-if="trainApprove.length > 0" class="gl_contentBox gl_mt_10" style="padding: 0">
      <div class="title">审核流程</div>
      <div class="approve_content">
        <div v-for="item in trainApprove" :key="item.id" class="steps">
          <span class="circle" />
          <span class="gl_pl_10">{{ item.approveTime | FormatDate('yyyy-MM-dd') }}</span>
          <div class="steps_content">
            <p>
              <span>{{ item.unitName }}于{{ item.approveTime | FormatDate('HH:mm:ss') }}进行了审核的操作。</span>
              <span>审核结果为：</span>
              <span :class="[ item.approveResultCode == 'ApproveSuccess' ? 'gl_color_success': 'gl_color_grey' ]">{{ item.approveResult.name }}</span>
            </p>
            <p class="gl_mt_10">备注说明：{{ item.comment }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
import Approve from '../identifyApprove/approve.vue';
import {
  api_GET_TrainTrainningApproveTrainningDetailsApproveId
} from '@/extend/api/trainswaggerApi/app';
export default {
  components: {
    Approve
  },
  data() {
    return {
      loading: false,
      prefixRoute: '', // 二级域名前缀
      info: {}, // 培训详情
      trainApprove: [] // 审核流程
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict,
      cache: state => state.dict.cache,
      user: state => state.user
    })
  },
  created() {
    this.getDict();
    this.getDictByType(['district']);
    this.approveId = this.$route.params.approveId;
    this.prefixRoute = `${location.origin}/train.html#/home/`; // 培训二级域名
    this.getInfo();
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict', getDictByType: 'dict/getDictByType' }),
    // 获取培训详情
    getInfo() {
      var that = this;
      that.loading = true;
      api_GET_TrainTrainningApproveTrainningDetailsApproveId(that.approveId).then(res => {
        that.info = res.trainning || {};
        that.trainApprove = res.trainningApproveRecords || [];
        that.trainApprove = that.trainApprove.filter(item => {
          return item.approveResultCode !== '' && item.approveResultCode !== null;
        });
        that.loading = false;
      }, (error) => {
        that.$message({ type: 'error', message: '获取培训详情失败！' + (error.error && error.error.message || '') });
        that.loading = false;
      });
    },
    // 处理省市区
    addressDataForCheck (data) {
      const _provinceCode = data.provinceCode;
      const _cityCode = data.cityCode;
      const _countyCode = data.countyCode;
      let _provinceData;
      let _cityData;
      let _countyData;
      if (_provinceCode && this.cache.district) {
        _provinceData = this.cache.district.find(item => item.code === _provinceCode);
      }
      if (_cityCode && _provinceData) {
        _cityData = _provinceData.children.find(item => item.code === _cityCode);
      }
      if (_countyCode && _cityData) {
        _countyData = _cityData.children.find(item => item.code === _countyCode);
      }
      _provinceData = _provinceData ? _provinceData.name : '';
      _cityData = _cityData ? _cityData.name : '';
      _countyData = _countyData ? _countyData.name : '';
      return `${_provinceData} ${_cityData} ${_countyData}`;
    },
    // 点击审核
    openApprove(row, code) {
      this.$refs.approve.open(row, code);
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    },
    // 返回列表
    goBack() {
      this.$router.push({
        name: 'TrainIdentifyApprove'
      });
    }
  }
};
</script>
<style scoped>
.title {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  font-weight: bold;
  padding-left: 24px;
  border-bottom: 1px solid #d9d9d9;
}
.content {
  font-size: 14px;
  color: #595959;
  padding: 26px 53px 70px 53px;
}
.content .name {
  color: #595959;
  font-weight: 600;
}
.content p {
  margin-top: 25px;
}
.img_box {
  width: 102px;
  display: inline-block;
  text-align: center;
  margin-top: 25px;
  margin-right: 55px;
}
.show_img {
  width: 102px;
  height: 102px;
  margin-bottom: 12px;
}
.show_img img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.text {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 58px - 26px);
  min-height: 200px;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  /* margin-left: 26px; */
  padding: 23px 28px 32px 28px;
}
.approve_content {
  padding: 24px 48px 24px 24px;
}
.circle {
  width: 8px;
  height: 8px;
  display: inline-block;
  background: #ffffff;
  border: 2px solid #108ee9;
  border-radius: 50%;
  position: relative;
}
.steps {
  color: #595959;
  font-size: 14px;
}
.steps:last-child ::after {
  background: #fff;
}
.steps ::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 1px;
  height: 130px;
  width: 2px;
  background: #e9e9e9;
}
.steps_content {
  height: 88px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 13px 20px;
  margin: 8px 0 24px 15px;
  font-weight: 600;
  color: #000;
}
.train_button {
  min-width: 92px;
  height: 40px;
  border-radius: 8px;
}
.entry {
  color: #1890ff;
}
.entry:focus, .entry:hover {
  text-decoration: underline;
}
</style>
